<template>
    <div class="personal_login" @keyup.enter="onSubmit">
        <div class="login_header">
            <div class="main">
                <!-- <a :href="url">
                    <img src="@/assets/img/WechatIMG233.png" alt />
                </a>-->
            </div>
        </div>
        <div class="logo">
            <!-- <a :href="url">
                    <img src="@/assets/img/Wechatlogo.png" alt />
            </a>-->
            <a :href="url" target="_blank" style="display:inline-block;">
                <img src="@/assets/img/zhaopinLogo.png" alt />
            </a>
        </div>
        <div class="login_box">
            <!-- <div class="login_methods">
        <el-button :class="['message_log',{'active':form.loginType===1}]" plain @click="msg_log">短信登录</el-button>
        <el-button :class="['message_log',{'active':form.loginType===2}]" plain @click="pwd_log">密码登录</el-button>
      </div>
      <el-form :model="form" ref="form" :rules="rules">
        <div v-if="form.loginType===1">
          <el-form-item prop="phone">
            <el-input v-model.trim="form.phone" placeholder="手机号"></el-input>
          </el-form-item>
          <el-form-item prop="captchaCode">
            <el-input class="captchaCode" v-model="form.captchaCode" placeholder="图片验证码"></el-input>
            <img :src="img" alt @click="changeImage" />
          </el-form-item>
          <el-form-item prop="smsCode" class="btn_inner">
            <el-input v-model="form.smsCode" placeholder="短信验证码">
              <el-button slot="append" @click="postMassage" :class="{'disabled':countDown}">
                发送验证码
                <span v-show="countDown">({{countDown}})</span>
              </el-button>
            </el-input>
          </el-form-item>
        </div>
        <div v-else>
          <el-form-item prop="account">
            <el-input v-model="form.account" placeholder="账号"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="form.password" placeholder="密码" show-password></el-input>
          </el-form-item>
          <el-form-item prop="captchaCode">
            <el-input v-model="form.captchaCode" placeholder="图片验证码" class="captchaCode"></el-input>
            <img :src="img" alt @click="changeImage" />
          </el-form-item>
        </div>
        <div class="agreement">
          <el-checkbox v-model="checked"></el-checkbox>
          <span>自动登录</span>
          <router-link class="fr" to="findPassword">忘记密码？</router-link>
        </div>
        <el-form-item>
          <el-button class="submit_btn" type="primary" @click="onSubmit">登录</el-button>
        </el-form-item>
      </el-form>
      <div class="to_reg">
        <span>没有樟树市人才服务账号？</span>
        <router-link to="/register">立即注册</router-link>
      </div> -->
            <div class="login_count">
                <el-row>
                    <el-col :span="24" style="text-align: center">
                        <img :src="src" alt="" style="width:249px;height:243px" />
                        <div>
                            <!-- <span v-if="!show" class="ewm">{{ times }}秒后过期</span>
                        <span v-if="show" class="ewm">已过期</span> -->

                            <!-- <a v-if="show" href="javascript:;" @click="ewmsx">重新获取</a> -->
                        </div>
                        <div>
                            <span class="ewm">请用微信扫描二维码登录</span>
                            <a class="reond" href="javascript:;" @click="ewmsx">刷新</a>
                        </div>
                        <!-- <div class="register">
              <el-link type="primary" :href="baseURL+'/person/#/register'" target="_blank">注册找工作</el-link>
              <el-link type="primary" :href="baseURL+'/company/#/register'" target="_blank">免费发职位</el-link>
            </div> -->
                    </el-col>
                </el-row>
                <div class="motk" v-show="times == 0"></div>
                <div class="motk_title" v-show="times == 0">
                    <!-- 您的二维码已失效，请点击下方刷新按钮 -->
                    <img src="@/assets/img/wxewmgq.png" alt="" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { login,captchaImg, postMsg, getUserlogin, wxLogin } from '../../../api/index';
import { token } from '../../../api/register';
import { encrypt } from '../../../utils/unitFile';
export default {
    name: 'personal_login',
    data() {
        var checkImage = (rule, value, callback) => {
            console.log('图片');

            if (value.length > 3) {
                captchaImg({ code: this.form.captchaCode, uuid: this.form.captchaUUid }).then(data => {
                    if (data.data) {
                        this.checkImage = true;
                        callback();
                    } else {
                        callback(new Error('请输入正确验证码'));
                    }
                });
            } else {
                callback();
            }
        };
        return {
            clickTime: 0,
            countDown: '',
            checkImage: false,
            checked: false,
            times: 60,
            scene: '',
            timerlogin: '',
            show: true,
            src: '',
            img: '',
            url: '',
            form: {
                timerMin: null,
                timer: null,
                phone: '',
                account: '',
                password: '',
                captchaCode: '',
                captchaUUid: '',
                smsCode: '',
                loginType: 1
            },
            rules: {
                account: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { pattern: /^[0-9a-zA-Z_/.~!@#\$%\^&\-=?\/:;,\(\)"'`|*<>+]+$/, message: '账号由数字、字母符号组成' }
                ],
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码', trigger: 'change' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { pattern: /^[0-9a-zA-Z_]{6,20}$/, message: '密码由长度为6-20的数字、字母或下划线组成' }
                ],
                captchaCode: [{ required: true, message: '请输入图片验证码', trigger: 'blur' }, { validator: checkImage }],
                smsCode: [{ required: true, message: '请输入手机验证码', trigger: 'blur' }]
            }
        };
    },
    created() {
        // 验证token是否有效
        // token().then(data => {
        //     if (data.success) {
        //         this.$message.error(`您已登录无需重复登录！`);
        //         this.$router.push({ path: '/' });
        //     }
        // });
    },
    mounted() {
        this.url = process.env.VUE_APP_URL;
        this.getCode();
        this.timestamp();
        this.getUserlogin();
        this.wxLogin();
        // this.changeImage();
    },
    methods: {
        // 发送短信验证码
        postMassage() {
            if (this.form.phone) {
                if (this.checkImage) {
                    if (this.countDown) {
                        return;
                    }
                    let query = {
                        phone: this.form.phone,
                        uuid: this.form.captchaUUid,
                        code: this.form.captchaCode,
                        type: 2
                    };
                    postMsg(query).then(data => {
                        if (data.success) {
                            let previous = this.clickTime;
                            let now = new Date();
                            if (now - previous > 60000) {
                                console.log(1);
                                this.clickTime = new Date();
                                this.countDown = 60;
                                this.form.timerMin = setInterval(() => {
                                    this.countDown -= 1;
                                }, 1000);
                                this.form.timer = setTimeout(() => {
                                    this.countDown = '';
                                    clearInterval(this.form.timerMin);
                                    clearTimeout(this.form.timer);
                                }, 60000);
                            }
                        } else {
                            this.checkImage = false;
                            this.$message.error(`${data.msg}`);
                        }
                    });
                } else {
                    this.$message.error('请正确输入图片验证码');
                }
            } else {
                this.$message.error('请输入手机号');
            }
        },
        // 登录
        onSubmit() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    let query = {
                        account: this.form.phone || this.form.account,
                        password: encrypt(this.form.password),
                        captchaCode: this.form.captchaCode,
                        captchaUUid: this.form.captchaUUid,
                        smsCode: this.form.smsCode,
                        loginType: this.form.loginType,
                        captchaChannelType: 2
                    };
                    login(query).then(data => {
                        console.log(data);
                        if (data.success) {
                            this.$message.success('登录成功');
                            localStorage.setItem('ep_userName', data.data.userName);
                            localStorage.setItem('ep_userId', data.data.userId);
                            // if (this.checked) {
                            //     localStorage.setItem('ep_password', this.form.password);
                            //     // localStorage.setItem('ep_autoLogin', true);
                            // }
                            this.$router.push({ path: '/' });
                        } else {
                            this.$message.error(`${data.msg}`);
                        }
                        this.changeImage();
                        this.checkImage = false;
                        this.clickTime = 0;
                        this.countDown = '';
                        this.form.smsCode = '';
                        clearInterval(this.form.timerMin);
                        clearTimeout(this.form.timer);
                    });
                } else {
                    // this.$message.error('请输入账号和密码');
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 短信登录
        msg_log() {
            this.form.loginType = 1;
            this.form.account = '';
        },
        // 切换密码登录
        pwd_log() {
            this.form.loginType = 2;
            this.form.phone = '';
        },
        timestamp() {
            this.timersta = setInterval(() => {
                console.log(33333);
                //  var str = timestamp.substring(8, timestamp.length);
                this.getUserlogin();
            }, 60000);
        },
        getUserlogin() {
            var timestamp = new Date().getTime() + '';
            timestamp = timestamp.substring(0, 8);
            getUserlogin().then(data => {
                if (data.success) {
                    this.src = data.data.url;
                    this.scene = data.data.scene;
                }
            });
        },
        wxLogin() {
            this.timerlogin = setInterval(() => {
                var timestamp = new Date().getTime() + '';
                timestamp = timestamp.substring(0, 8);
                // let quary = {
                //     sceneId: timestamp
                // };
                var formData = new FormData();
                formData.append('sceneId', this.scene);
                wxLogin(formData).then(data => {
                    if (data.success) {
                        //  this.src=data.data
                        this.$message.success('登录成功');
                        localStorage.setItem('ep_userName', data.data.userName);
                        localStorage.setItem('ep_userId', data.data.userId);
                        // if (this.checked) {
                        //     localStorage.setItem('ep_password', this.form.password);
                        //     // localStorage.setItem('ep_autoLogin', true);
                        // }
                          this.$router.push({ path: '/' });
                        clearInterval(this.timer);
                        clearInterval(this.timersta);
                        clearInterval(this.timerlogin);
                        console.log(3333333);
                      
                    } else {
                    }
                    // this.changeImage();
                    this.checkImage = false;
                    this.clickTime = 0;
                    this.countDown = '';
                    this.form.smsCode = '';
                    clearInterval(this.form.timerMin);
                    clearTimeout(this.form.timer);
                });
            }, 3000);
        },
        ewmsx() {
            this.times = 60;
            // this.wxLogin();
            this.getCode();
            this.getUserlogin();
            this.wxLogin();
            // this.src='http://10.2.11.244:8100/zsrencai/api/ms/user/login/qrcode'

            this.$forceUpdate();
        },
        getCode() {
            this.show = false;
            this.timer = setInterval(() => {
                this.times--;
                if (this.times === 0) {
                    this.show = true;
                    clearInterval(this.timer);
                    clearInterval(this.timersta);
                    clearInterval(this.timerlogin);
                }
            }, 1000);
        }
    }
};
</script>

<style lang="css" scoped>
.logo {
    margin-top: 30px;
    text-align: center;
    cursor: pointer;
}
.el-button.active {
    border-color: rgba(0, 147, 255, 1);
}
.login_methods {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.personal_login {
    width: 100%;
    background: rgba(246, 246, 248, 1);
    opacity: 1;
}
/* .el-input-group__append /deep/ .el-button.disabled {
    color: rgba(117, 117, 117, 1);
} */
.personal_login .login_header {
    width: 100%;
    height: 40px;
    background: rgba(24, 147, 252, 1);
    opacity: 1;
}
.main a {
    display: inline-block;
    height: 40px;
}
.main a img {
    margin-top: 5px;
}
.personal_login .login_box {
    width: 424px;
    height: 370px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 3px 6px rgba(51, 51, 51, 0.16);
    opacity: 1;
    border-radius: 8px;
    padding: 56px;
    margin: 80px auto 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}
.personal_login .login_box .el-form {
    margin-top: 14px;
}
.personal_login .login_box .message_log {
    font-size: 16px;
    width: 134px;
    height: 40px;
    opacity: 1;
}
.personal_login .login_box .el-input.captchaCode {
    display: inline-block;
    width: 181px;
    margin-right: 23px;
}
.login_box .el-input.captchaCode /deep/ input.el-input__inner {
    text-transform: uppercase;
}
.personal_login .login_box img {
    vertical-align: middle;
    cursor: pointer;
    /* width: 108px;
    height: 40px; */
}
.personal_login .login_box .password_log {
    font-size: 16px;
    width: 134px;
    height: 40px;
    margin-left: 44px;
    opacity: 1;
}
/* .personal_login .btn_inner /deep/ .el-input__suffix {
    left: 205px;
    width: 70px;
    padding: 0;
} */
.personal_login .btn_inner /deep/ .el-button {
    width: 110px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    vertical-align: middle;
    background: #f5f7fa;
    color: rgba(0, 147, 255, 1);
    opacity: 1;
    padding: 0;
    padding-left: 6px;
    cursor: pointer;
    border: none;
    /* border-left: 2px solid rgba(232, 232, 232, 1); */
}
.personal_login .btn_inner /deep/ .el-button.disabled {
    color: #999999;
}
.personal_login .login_box .el-input {
    line-height: 40px;
    margin-top: 18px;
}
.personal_login .login_box .el-input /deep/ .el-input__inner {
    height: 40px;
    line-height: 40px;
    border-radius: 0;
}
.personal_login .agreement {
    margin: 28px 0;
    line-height: 20px;
}
.personal_login .agreement .el-checkbox,
.personal_login .agreement .el-checkbox .el-checkbox__inner {
    margin-top: 3px;
    margin-right: 4px;
    width: 12px;
    height: 12px;
}
.personal_login .agreement span {
    width: 56px;
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    color: rgba(153, 153, 153, 1);
    opacity: 1;
}
.personal_login .agreement a {
    width: 70px;
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    color: rgba(153, 153, 153, 1);
    opacity: 1;
}
.personal_login .submit_btn {
    width: 312px;
    height: 40px;
    background: rgba(24, 147, 252, 1);
    border: 1px solid rgba(24, 147, 252, 1);
    opacity: 1;
    font-size: 14px;
}
.personal_login .to_reg {
    margin-top: 32px;
    width: 196px;
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    opacity: 1;
}
.personal_login .to_reg span {
    color: rgba(153, 153, 153, 1);
}
.personal_login .to_reg a {
    color: rgba(0, 147, 255, 1);
}
.ewm {
    color: #cac3c3;
    margin-right: 10px;
}
.login_count {
    position: relative;
    margin: 0 auto;
    width: 300px;
    height: 300px;
}
.motk {
    position: absolute;
    top: 0;
    height: 243px;
    width: 280px;
    z-index: 1000;
    background: #f5f7fa;
    opacity: 0.6;
}
.motk_title {
    position: absolute;
    top: 40px;
    left: 83px;
    width: 120px;
    color: red;
    z-index: 1001;
}
.reond {
    z-index: 1228;
}
</style>
